<!-- 基础折线图 -->
<template>
  <div :id="props.id" class="main-box"></div>
</template>

<script setup lang="ts" name="HzEchartsBarDataSet">
import * as echarts from 'echarts';
import {onMounted} from "vue";
import {getEchartsTextColor, getEchartsTheme} from "/@utils/GlobalFunction.js";
import {EchartsData} from "/@bean/GlobalEntity.js";
import {loadEchartsData} from "/@api/hz-bigscreen-api";

// eslint-disable-next-line no-undef
const props = defineProps({
  id: {
    type: String,
    default: 'bar-simple'
  },
  showTitle: {
    type: Boolean,
    default: true
  },
  showLegend: {
    type: Boolean,
    default: true
  },
  showTooltip: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: '简单数据集'
  },
  data: {
    type: Object,
    default: () => {
      return [
        ['category', '2015', '2016', '2017'],
        ['Matcha Latte', 43.3, 85.8, 93.7],
        ['Milk Tea', 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 86.4, 65.2, 82.5],
        ['Walnut Brownie', 72.4, 53.9, 39.1]
      ]
    }
  },
  apiPath: { // api路径
    type: String,
    default: ''
  },
  chartsType: { // 图表类型
    type: String,
    default: 'barDataset'
  },
  methodType: {
    type: String, // 请求方式
    default: 'get'
  }
});

const option = {
  backgroundColor: "rgba(0,0,0,0)",
  title: {
    text: props.title,
    left: 'center',
    textStyle: {
      color: getEchartsTextColor()
    },
    show:props.showTitle
  },
  dataset: {
    source: props.data
  },
  xAxis: {
    type: 'category',
    axisLine: {
      lineStyle: {
        color: getEchartsTextColor()
      }
    }
  },
  yAxis: {
    axisLine: {
      lineStyle: {
        color: getEchartsTextColor()
      }
    }
  },
  tooltip: {
    show:props.showTooltip
  },
  legend: {
    left: 'right',
    textStyle: {
      color: getEchartsTextColor()
    },
    show:props.showLegend
  },
  series: getSeries(props.data)
};

onMounted(() => {
  init()
});
const basicBar = ref();

function getSeries(data : any) {
  const series = [];
  for (let i = 1; i < data[1].length; i++) { // 从1开始，因为第一个元素是x轴的值 ['Matcha Latte', 43.3, 85.8, 93.7],
    series.push({
      type: 'bar'
    });
  }
  return series;
}
function init() {
  basicBar.value = markRaw(echarts.init(document.getElementById(props.id), getEchartsTheme));
  basicBar.value.setOption(option);
  window.addEventListener('resize', () => {
    basicBar.value.resize();
  });
}
//@ts-ignore
watch(getEchartsTheme, () => {
  resetOption()
  init()
});

function resetOption() {
  option.title.textStyle.color = getEchartsTextColor()
  option.xAxis.axisLine.lineStyle.color = getEchartsTextColor()
  option.yAxis.axisLine.lineStyle.color = getEchartsTextColor()
  option.legend.textStyle.color = getEchartsTextColor()
}
// 刷新图表方式，该方法需要提供给外部调用
// eslint-disable-next-line no-unused-vars
const refreshCharts = (data : any) => {
  option.title.text = data.title;
  option.dataset.source = data.data;
  option.series = getSeries(data.data);
  init()
};

// 刷新图表  根据apiPath，method，type query获取数据
const refreshChartsByApi = async (query : any) => {
  // 如果query中没有封装type则给query添加type属性
  if (!query.hasOwnProperty('chart_type')) {
    query.chart_type = props.chartsType
  }
  const s = await loadEchartsData(props.apiPath, props.methodType, query)
  refreshCharts(s.data)
}

// 重置图表大小
const resizeEcharts = () => {
  basicBar.value.resize();
}

// eslint-disable-next-line no-undef
defineExpose({
  refreshCharts,
  resizeEcharts,
  refreshChartsByApi
});
</script>

<style scoped>
  .main-box {
    width: 100%;
    height: 100%;
  }
</style>